<!--
*@Author: QWP
*@Description: 过渡页的侧边栏
*@Date: 2024-07-03 14:34:04
-->
<template>
  <a-layout class="f-h-100 u-aside-menu">
    <a-layout-header style="padding: 0; height: 40px; line-height: 40px;"
      :style="siderStyle">
      <a-flex justify="center" align="center" v-if="expand" >
        <!-- <a-image :src="logo" class="u-aside-icon" :preview="false"></a-image> -->
      </a-flex>
      <div v-else class="u-sys-top-name">{{ homeStore['sysName'] }}</div>
    </a-layout-header>

    <a-layout-content class="f-h-100 u-sider-menu-content" 
      style="overflow: auto;">
      <!-- <div :style="{'width': expand ? '80px' : '220px'}"> -->
        <!-- :inline-collapsed="true" -->
        <a-menu
          ref="menuRef"
          mode="inline"
          theme="dark"
          :style="siderStyle"
          :items="data"
          v-model:openKeys="openKeys"
          v-bind="$attrs"
        ></a-menu>
      <!-- </div> -->
    </a-layout-content>
  </a-layout>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, watch, h, useAttrs } from 'vue' 
import { useHomeStore, useEmergencyStore } from '@/store'
import { storeToRefs } from 'pinia'
import { alertC, urlFile, isValue } from '@/util/common'
import { getItemByIds } from '@/util/format.ts'
import { ControlOutlined } from '@ant-design/icons-vue';
import { getColor } from '@/views/index/emergencyIndex/data'
interface Props {
  loading: boolean,
  data: Array<object>
}
const props = withDefaults(defineProps<Props>(), {
  loading: false,
})

const attrs = useAttrs()

const homeStore = useHomeStore();
const { expand, expandKeyPath } = storeToRefs(homeStore)

const emits = defineEmits(['expand'])

const menuRef = ref()
const openKeys = ref<string[]>([])
const siderStyle = reactive<CSSProperties>({
  backgroundColor: 'rgb(0, 21, 41)'
})

const logo = urlFile('logo.png')

watch(() => attrs.selectedKeys, (nval, oval) => {
  if(nval.length == 0) {
    openKeys.value = []
  }
  else {
    openKeys.value = expandKeyPath.value[nval[0]] || []
  }
}, { immediate: true })

</script>

<style lang='scss'>
.u-aside-menu {
  background-color: #001529 !important;
  .u-aside-icon {
    margin-right: 8px; 
    width: 30px; 
    height: 30px;
  }
  .u-sys-top-name {
    padding: 0 6px;
    text-align: center;
    letter-spacing: 6px;
    // text-justify: inter-word;
    font-size: 18px;
    font-weight: 700;
    background: -webkit-linear-gradient(rgb(136,198,253), rgb(46, 153, 251));
    background: linear-gradient(rgb(136,198,253), rgb(46, 153, 251)); 
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    &::after {
      content: '';
      display: inline-block;
      width: 100%;
    }
  }
  .u-sider-menu-content {
    &::-webkit-scrollbar {
      width: 0;
    }
  }
  .ant-menu-submenu-title {
    height: 44px !important;
  }
  .ant-menu-item {
    height: 44px !important;
  }
}
</style>